<template>
  <div class="myaside">
    <div class="change-collapse">  
      <el-icon v-if="isCollapse" style="color: #fff;" @click="changeCollapse"><Fold /></el-icon>  
      <el-icon v-else style="color: #fff;" @click="changeCollapse"><Expand /></el-icon>  
    </div>
    <el-menu
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :default-active="activeIndex"
      :default-opened="defaultOpened"
      :unique-opened="true"
      background-color='transparent'
      text-color="#F2F2F2"
      active-text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item index="1" @click="goto('/')">
        <template #title>
          <el-icon><House /></el-icon>
            <span>首页</span>
        </template>
      </el-menu-item>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><Stamp /></el-icon>
          <span>资质审核与管理</span>
        </template>
          <el-menu-item-group>
            <el-menu-item index="2-1" @click="goto('/servicedesigner')">定制官管理</el-menu-item>
            <el-menu-item index="2-2" @click="goto('/agency')">旅行社管理</el-menu-item>
            <el-menu-item index="2-3" @click="goto('/qualification')">资质审核</el-menu-item>
          </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Filter /></el-icon>
          <span>内容审核与过滤</span>
        </template>
          <el-menu-item-group>
            <el-menu-item index="3-1" @click="goto('/service')">服务审核</el-menu-item>
            <el-menu-item index="3-2" @click="goto('/post')">帖子审核</el-menu-item>
            <el-menu-item index="3-3" @click="goto('/recommend')">推荐逻辑优化</el-menu-item>
          </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <el-icon><User /></el-icon>
          <span>用户账号管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1" @click="goto('/appUser')">APP用户管理</el-menu-item>
          <el-menu-item index="4-2" @click="goto('/authourity')">后台权限管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="5">
        <template #title>
          <el-icon><DataAnalysis /></el-icon>
          <span>数据统计与分析</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="5-1" @click="goto('/userbehavior')">用户行为</el-menu-item>
          <el-menu-item index="5-2" @click="goto('/operationaldata')">运营数据</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="6">
        <template #title>
          <el-icon><Present /></el-icon>
          <span>广告与增值服务</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="6-1" @click="goto('/advertisement')">广告管理</el-menu-item>
          <el-menu-item index="6-2" @click="goto('/promotion')">增值服务</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="7">
        <template #title>
          <el-icon><Bell /></el-icon>
          <span>用户反馈与举报</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="7-1" @click="goto('/report')">用户举报</el-menu-item>
          <el-menu-item index="7-2" @click="goto('/feedback')">用户反馈</el-menu-item>
       </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 控制菜单折叠状态
const isCollapse = ref(false);

// 路由相关
const route = useRoute();  // 获取当前路由信息
const router = useRouter(); // 获取路由实例

// 当前激活的菜单项索引
const activeIndex = ref('');

// 默认展开的菜单项索引
const defaultOpened = ref([]);

// 路由路径与菜单项索引的映射
const routeToActiveIndexMap = {
'/path1': '1',
'/path2': '2',
// 添加更多映射
};

// 在组件挂载时根据路由设置 activeIndex
onMounted(() => {
activeIndex.value = routeToActiveIndexMap[route.path] || '';  // 设置默认选中的菜单项
});

// 菜单折叠切换
const changeCollapse = () => {
isCollapse.value = !isCollapse.value;
};

// 路由跳转方法
const goto = (path) => {
router.push(`/system${path}`).catch((err) => {
  if (err.name !== 'NavigationDuplicated') {
    throw err;  // 处理其他错误
  }
});
};

// 打开/关闭菜单项的回调
const handleOpen = (key, keyPath) => {
console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
console.log(key, keyPath);
};
</script>

<style scoped>
.myaside{
display: flex;
flex-direction: column;
overflow: hidden; /* 避免宽度变化时内容溢出 */
}
.change-collapse {
  height: 60px;
  display: grid;  
  place-items: center; 
} 
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px; /* 设置展开时的宽度 */
}

.el-menu-item-group {
background-color: #6C8187;
}

</style>

<style scoped>
.myaside{
display: flex;
flex-direction: column;
overflow: hidden; /* 避免宽度变化时内容溢出 */
}
.change-collapse {
  height: 60px;
  display: grid;  
  place-items: center; 
} 
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px; /* 设置展开时的宽度 */
}

.el-menu-item-group {
background-color: #6C8187;
}

</style>